<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">

        <el-form-item label="用户ID:">
          <el-input v-model="q.player_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>

        <el-form-item label="订单号:">
          <el-input v-model="q.data_id" placeholder="订单号" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="提交时间:">
          <el-date-picker v-model="q.created_at_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="重设问题类型:">
          <el-select v-model="q.reset_type_id" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="item in problemsTypeList" :key="item.id" :label="item.desc" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类:">
          <el-select v-model="q.reset_question_type" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="(item,index) in secondList_type" :key="index" :label="item.lab" :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类:">
          <el-select v-model="q.reset_game" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="(item,index) in thridList_type" :key="index" :label="item.lab" :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题状态:">
          <el-select v-model="q.status" clearable placeholder="请选择">
            <el-option v-for="(val,name) in {'已处理':'1','未处理':'0'}" :key="name" :label="name" :value="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户等级:">
          <el-input v-model="q.level" placeholder="用户等级" prefix-icon="el-icon-edit"></el-input>

        </el-form-item>
        <el-form-item label="用户反馈:">
          <el-select v-model="q.comment" clearable placeholder="请选择">
            <!-- <el-option label="所有" :value=null></el-option> -->
            <el-option v-for="(val,name) in {'不满意':'2','满意':'1'}" :key="name" :label="name" :value="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人:">
          <el-select v-model="q.handler_id" filterable clearable placeholder="请选择">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质检结果:">
          <el-select v-model="q.quality" clearable placeholder="请选择">
            <!-- <el-option label="所有" :value=null></el-option> -->
            <el-option v-for="(val,name) in {'合格':1 ,'不合格':2 }" :key="name" :label="name" :value="val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质检人:">
          <el-select v-model="q.quality_user_id" filterable clearable placeholder="请选择">
            <el-option v-for="item in quality_user_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词:">
          <el-input v-model="q.desc" placeholder="关键词" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
          <el-button size="mini" @click="uploadWordOrder" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading" size="mini" stripe border
      fit highlight-current-row @selection-change="handleSelectionChange" @sort-change="sortlist">
      <el-table-column prop="id" label="订单号" min-width="80">
      </el-table-column>
      <el-table-column prop="player_id" label="用户ID" min-width="100">
      </el-table-column>
      <el-table-column prop="type.desc" label="问题类型" min-width="100">
      </el-table-column>
      <el-table-column prop="reset_type.desc" label="重设问题类型" min-width="100">
      </el-table-column>
      <el-table-column prop="level" label="用户等级" min-width="100">
      </el-table-column>
      <el-table-column min-width="160" prop="created_at" label="提交时间" sortable>
      </el-table-column>
      <el-table-column min-width="70" prop="status" label="问题状态">
        <template slot-scope="scope">
          <span>{{scope.row.status === 0?'未处理':'已处理'}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="70" prop="quality" label="质检状态">
        <template slot-scope="scope">
          <span>{{scope.row.quality === 1?'合格': scope.row.quality === 2?'不合格':''}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="210" prop="quality_user" label="质检人">
      </el-table-column>
      <el-table-column min-width="150" prop="finish_at" label="回复时间">
      </el-table-column>
      <el-table-column width="100" prop="process_time" label="处理时长(s)">
        <template slot-scope="scope">
          <span v-if="scope.row.process_time">{{scope.row.process_time.toFixed()}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="comment" label="用户反馈">
        <template slot-scope="scope">
          <span>{{scope.row.comment === 1?'满意':(scope.row.comment===2?"不满意":'')}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="urgent_count" label="加急次数">
      </el-table-column>
      <el-table-column width="210" prop="handler" label="操作人">
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="Details(scope.row)">查看</el-button>
            <el-button v-if="scope.row.status === 0 && scope.row.type.desc !== '充值问题' && scope.row.handler !== null"
              type="danger" size="mini" @click="Transfer(scope.row)">转接</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr" :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="listData.total">
      </el-pagination>
    </div>
    <save-update v-dialogDrag v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :problemsTypeList="problemsTypeList">
    <!-- <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :problemsTypeList="problemsTypeList"> -->
    </save-update>
    <transfer v-if="showTransfer" :showUpdate.sync="showTransfer" :id="show_id" :showTransfer="showTransfer"
      :typeId="typeId" :handlerId="handlerId" ></transfer>
  </div>
</template>

<script>
import { getWorkOrder, getuserList, getProblemsList, uploadWordOrder, getQualityUser } from '@/api'
import saveUpdate from './saveUpdate'
import transfer from './transfer'
import { queryFilter } from '@/utils/patch'


export default {
  name: "index",
  components: { saveUpdate, transfer },
  data () {
    return {
      show_id: null,
      listData: {},
      // q: { page_size: 30, page_no: 1, pro_id: this.$store.state.user.userinfo.pro_id },
      q: {page_size: 30, page_no: 1},
      listLoading: false,
      showUpdate: false,
      problemsTypeList: [],
      Timetype: true,
      working: true,
      showTransfer: false,
      typeId: 0,
      handlerId: 0,
      userList: [],
      uploadData: {},
      quality_user_list: [],
      secondList_type: [],
      thridList_type: []
    }
  },
  created () {
    this.getList()
    this.getuserList()
    this.getProblemsList()
    this.getQualityUser()
  },
  methods: {
    sortlist(sort) {
      if (sort.order === "descending") {
        this.q.order_by = "-" + sort.prop;
      } else {
        this.q.order_by = sort.prop;
      }
      this.getList();
    },
    getProblemsList () {
      getProblemsList().then(res => {
        if (res.status === 0) {
          this.problemsTypeList = res.data.items
        }
      })
    },
    getuserList () {
      getuserList().then(res => {
        if (res.status === 0) {
          this.userList = res.data
        }
      })
    },
    receiptWork (val) {
      //通过val值判断点击的是工作还是停止
      //如果是工作，working改为true。否则为false
      if (val === 'work') {
        this.working = true
      } else {
        this.working = false
      }
    },
    Details (row) {
      this.show_id = row.id
      this.showUpdate = true
    },
    sendMsg () {

    },
    query () {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30 })
      this.getList()
    },
    reload () {
      this.q = { page_no: 1, page_size: 30 }
      this.getList()
    },
    handleSizeChange (val) {
      this.q.page_size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.page_no = val
      this.getList()
    },
    Transfer (row) {
      this.show_id = row.id
      this.typeId = row.type_id
      this.handlerId = row.handler_id
      this.showTransfer = true
    },
    getList () {
      let queryObj = queryFilter(this.q)
       this.listLoading = true
      getWorkOrder(queryObj).then(res => {
        console.log(res,'---')
        if (res.status === 0) {
          let m = new Set()
          this.listLoading = false
          this.listData = res.data
          res.data.items.forEach(item => {
            m.add(item.handler)
          })
        }
      })
    },
    getQualityUser () {
      getQualityUser().then((res)=> {
        if (res.status === 0){
          // console.log(res,'ppp')
          this.quality_user_list = res.data
        }
      })
    },
    handleSelectionChange (sel) {
      console.log(sel)
    },
    toggleTimetype () {
      if (this.Timetype) {
        delete this.q.created_at_begin
        delete this.q.created_at_end
        this.Timetype = !this.Timetype
      } else {
        delete this.q.updated_at_begin
        delete this.q.updated_at_end
        this.Timetype = !this.Timetype
      }
    },
    uploadWordOrder(){
      this.$confirm(`确认下载详情么？`, '下载详情', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.uploadData = Object.assign(this.q, {page_no: 1, page_size: 30})
        // console.log(this.uploadData)
        uploadWordOrder(this.uploadData).then(res => {
          console.log(res, 'data', this.uploadData)
          if(res.status === 0&&res.data.url){
            window.location = res.data.url;
            this.$message({ type: 'success', message: '已成功下载' });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下载'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        })
      })
    },
  },
  watch: {
    showUpdate () {
      if(this.showUpdate!==0&&!this.showUpdate){
        this.getList()
      }
    },
    showTransfer () {
      if (!this.showTransfer) {
        this.getList()
      }
    },
    'q.reset_type_id': function () {
      if (this.q.reset_type_id === 1) {
        delete this.q.reset_question_type
        delete this.q.reset_game
      } else if (this.q.reset_type_id === 2) {
        this.secondList_type = this.$store.state.app.withDrawProblemType
        this.thridList_type = [];
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      } else if (this.q.reset_type_id === 3) {
        this.secondList_type = this.$store.state.app.accountProblemType
        this.thridList_type = [];
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      } else if (this.q.reset_type_id === 4) {
        this.secondList_type = this.$store.state.app.gameProblemType;
        this.thridList_type = this.$store.state.app.gameProblemNextType;
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      } else if (this.q.reset_type_id === 5) {
        this.secondList_type = [];
        this.thridList_type = [];
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      } else if (this.q.reset_type_id === 6) {
        this.secondList_type = this.$store.state.app.otherProblemType
        this.thridList_type = [];
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      } else {
        this.secondList_type = [];
        this.thridList_type = [];
        delete this.q.reset_question_type;
        delete this.q.reset_game;
      }
    }
  }
}
</script>

<style scoped>
.el-form-item__label {
  width: 100px !important;
}
</style>
